<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wangzm
 * @LastEditTime: 2020-03-03 13:38:56
 * @description: schema
 -->
<template>
  <base-page-view class-name="schema-container">
    <base-nav left-icon="back">
      <view slot="title" class="title-block" @click="$navigateTo('/pagesPublic/search/index')">
        <search-bar placeholder="输入搜索关键字" background="#F3F3F3" border-radius="26rpx" disabled></search-bar>
      </view>
    </base-nav>
    <view class="content-block" :style="'height: '+contentHeight+'px'">
      <view class="left-part">
        <view class="list-container">
          <view
            v-for="(item, index) in categoryList"
            :key="index"
            class="category-item"
            :class="{ active: currentCategoryIndex === index, 'up-item': currentCategoryIndex-1 === index, 'down-item': currentCategoryIndex+1 === index }"
            @click="categoryClick(index)">{{ item.name }}</view>
          <view class="category-item holder-item" :class="{ 'down-item': currentCategoryIndex+1 === categoryList.length }">.</view>
        </view>
      </view>
      <scroll-view class="right-part" :scroll-into-view="intoViewId" scroll-y scroll-with-animation @scroll="scrollHandle">
        <view
          v-for="(item, index) in categoryList"
          :id="'category-item-id' + index"
          :key="index"
          class="category-item">
          <view class="banner" @click="toCategoryDetial(item.id)">
            <b-image :src="item.banner" mode="widthFix" />
          </view>
          <view class="title">
            <view class="sub-item">{{ item.name }}</view>
            <view @click="toCategoryDetial(item.id)">全部商品</view>
            <image class="icon" src="/static/images/icon/icon_arror_right.png" mode="aspectFit" @click="toCategoryDetial(item.id)" />
          </view>
          <view class="sub-category">
            <view v-for="(sItem, sIndex) in item.categories" :key="sIndex" class="sub-category-item" @click="toCategoryDetial(item.id, sItem.id)">
              <b-image width="120" height="120" :src="sItem.small_pic" mode="aspectFit" />
              <view class="name">{{ sItem.name }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </base-page-view>
</template>

<script>
import searchBar from '@/components/searchBar/index'
import { debounce } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    searchBar
  },
  data() {
    return {
      screenWidth: 375,
      contentHeight: 603,
      categoryList: [],
      currentCategoryIndex: 0,
      categoryClickFlag: false,
      heightArray: []
    }
  },
  computed: {
    intoViewId: function() {
      return this.categoryClickFlag ? `category-item-id${this.currentCategoryIndex}` : ''
    }
  },
  created() {
    uni.getSystemInfo({
      success: ({ screenWidth, screenHeight, statusBarHeight }) => {
        this.screenWidth = screenWidth
        this.contentHeight = screenHeight - statusBarHeight - 44
      }
    })
  },
  onLoad() {
    this.heightArray = []
    this.middleIndex = 0
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await this.$api.excellentApi.getCategorySecond({
        parentId: 0
      })
      if (res.success) {
        let height = 0
        const h = this.screenWidth / 375
        const base = Math.floor(36 * h) + Math.floor(74 * h) + Math.floor(10 * h) * 3 + Math.floor(5 * h)
        const lineHeight = Math.floor(84 * h)
        this.categoryList = res.data || []
        this.categoryList.map((item, index) => {
          height = base + Math.ceil(item.categories.length / 3) * lineHeight + (index > 0 ? this.heightArray[index - 1] : 0) // 当前分类的总体高度
          this.heightArray.push(height)
        })
      }
    },
    categoryClick(index) {
      this.categoryClickFlag = true
      this.currentCategoryIndex = index
    },
    scrollHandle: debounce(function(e) {
      if (this.categoryClickFlag) {
        this.categoryClickFlag = false
      } else if (e.detail) {
        const scrollTop = e.detail.scrollTop
        for (let i = 0; i < this.heightArray.length; i++) {
          if (scrollTop < this.heightArray[i]) {
            this.currentCategoryIndex = i
            break
          }
        }
      }
    }, 100),
    toCategoryDetial(itemId, subItemId) {
      this.$navigateTo(`/pagesPublic/category/index?id=${subItemId || ''}&parent=${itemId}`)
    }
  }
}
</script>
